// 1. React核心库
import React from 'react';

// 2. UI组件库 - 按字母顺序
import { Card, Col, Row, Statistic } from 'antd';

// 3. 图标库
import { UserOutlined, KeyOutlined, TeamOutlined, SettingOutlined } from '@ant-design/icons';

// 4. 专业组件库
import { PageContainer } from '@ant-design/pro-components';

const PermissionsOverview: React.FC = () => {
  return (
    <PageContainer
      title="权限管理"
      subTitle="统一的权限管理中心，管理用户、角色和权限"
    >
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="权限分类"
              value={5}
              prefix={<SettingOutlined />}
              suffix="个"
            />
            <div style={{ marginTop: 16 }}>
              <a href="/permissions/categories">管理权限分类</a>
            </div>
          </Card>
        </Col>
        
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="系统权限"
              value={28}
              prefix={<KeyOutlined />}
              suffix="个"
            />
            <div style={{ marginTop: 16 }}>
              <a href="/permissions/permissions">管理系统权限</a>
            </div>
          </Card>
        </Col>
        
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="角色数量"
              value={8}
              prefix={<TeamOutlined />}
              suffix="个"
            />
            <div style={{ marginTop: 16 }}>
              <a href="/permissions/roles">管理角色</a>
            </div>
          </Card>
        </Col>
        
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="用户分配"
              value={156}
              prefix={<UserOutlined />}
              suffix="条"
            />
            <div style={{ marginTop: 16 }}>
              <a href="/permissions/user-roles">管理用户角色</a>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        <Col xs={24} md={12}>
          <Card title="快速操作" size="small">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <a href="/permissions/categories/create">创建权限分类</a>
              <a href="/permissions/permissions/create">创建系统权限</a>
              <a href="/permissions/roles/create">创建角色</a>
              <a href="/permissions/user-roles">分配用户角色</a>
            </div>
          </Card>
        </Col>
        
        <Col xs={24} md={12}>
          <Card title="系统说明" size="small">
            <div style={{ fontSize: '14px', lineHeight: '1.6' }}>
              <p><strong>权限分类</strong>：对权限进行分类管理，便于组织和查找</p>
              <p><strong>系统权限</strong>：定义系统中的具体权限项</p>
              <p><strong>角色管理</strong>：创建角色并分配权限</p>
              <p><strong>用户角色</strong>：为用户分配角色，支持临时权限</p>
            </div>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default PermissionsOverview;
